<template>
  <div style="background:#ddd;">
    <div>
      <h1>{{msg}}</h1>
    </div>
    <!-- 父组件传参，父组件调用子组件的方法 -->
    <!-- <testSon :dataFa="msgFa" ref="testSon"></testSon> -->
    <!-- 子组件调用父组件的方法 -->
    <!-- <testSon @faMethod="faMethodOther"></testSon> -->
    <!-- 子组件给父组件传参，并且加自己的参数，要用$event -->
    <testSon :dataFa="msgFa" @faMethod="faMethodOther($event,i)" v-for="i in 2">
      <div>我是父组件的div</div>
      <div slot="up">我是up，看看我在哪</div>
    </testSon>
    <button @click="click">父组件按钮</button>
  </div>
</template>

<script>
import testSon from "./testSon";
export default {
  components: {
    testSon
  },
  data() {
    return {
      msg: "我是父组件——————",
      msgFa: "从父组件传递到子组件的值"
    };
  },
  methods: {
    click() {
      this.$refs.testSon.testSon();
    },
    faMethodOther(e, i) {
      this.msgFa = this.msgFa + e + "---" + i;
    }
  }
};
</script>

<style scoped>
</style>
